<template>
	<div>
		<el-form
			style="margin-top:20px;"
			ref="ruleForm"
			:label-position="labelPosition"
			label-width="120px"
			class="demo-ruleForm container"
		>
		<h3>采购单  {{inputs.code}}</h3>
			<el-button style="margin-left:30px;margin-top:30px;" type="primary" v-show="ex" v-if="inputs.state == 1" @click="handleExport()">导出</el-button>
			<el-row style="margin-top:20px;">
				<el-col :span="12">
					<el-form-item label="创建时间：" >
						{{inputs.createTime}}
					</el-form-item>
					
					
				</el-col>
				<el-col :span="10">
					<el-form-item label="进度：" >
						  {{inputs.state == 0?'待核对':'已核对'}}
					</el-form-item>
				   
				</el-col>
				<el-col >
					<el-form-item label="操作人：" >
						 {{inputs.user}}
					</el-form-item>
				   
				</el-col>
				<el-col >
					<el-form-item label="采购商：" >
						 {{inputs.purchase}}
					</el-form-item>
				   
				</el-col>
				<el-col :span="12">
					<el-form-item label="品种数：" >
						{{inputs.num}}
					</el-form-item>
					
					
				</el-col>
				<el-col :span="10">
					<el-form-item label="总价(元)：">
						  {{inputs.totalPrice}}
					</el-form-item>
				   
				</el-col>
			</el-row>
			<el-form-item class="footerFixed" label-width="0px">
				<el-button @click="goback">返回</el-button>
			</el-form-item>
		</el-form>
		<div class="container" style="margin-top: 20px;">
			<h3>供货明细</h3>
			<el-row style="margin-top:20px;">
			    
			</el-row>
			<el-table
			    :data="tableData"
			    border
			    style="margin-top:20px;"
			    ref="multipleTable"
			    header-cell-class-name="table-header"
			>
			    <el-table-column prop="drugCode" sortable width="120" label="药品编号"></el-table-column>
			    <el-table-column prop="drugName" sortable width="120" label="药品名称"></el-table-column>
				<el-table-column prop="purchaseNum" sortable width="120" label="采购量" ></el-table-column>
				<el-table-column prop="purchaseUnit" sortable width="120" label="采购单位" ></el-table-column>
				<el-table-column prop="price" sortable width="120" label="单价(元)" ></el-table-column>
				<el-table-column prop="totalPrice" sortable width="120" label="小计(元)" ></el-table-column>
				<el-table-column prop="supplyBatch" sortable width="120" label="供应批次" >
					<template slot-scope="scope">
						<span v-if="scope.row.supplyBatch != '' && scope.row.supplyBatch != null">{{scope.row.supplyBatch}}</span>
						<el-button
						    type="text"
							v-else
						    @click="handleSelect(scope.$index, scope.row)"
						>请选择</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="remarks" width="120" sortable label="备注" ></el-table-column>
				<el-table-column prop="department" width="200" sortable label="采购部门" ></el-table-column>
				<el-table-column prop="address" width="120" sortable label="送货地址" ></el-table-column>
				<el-table-column prop="arrivalTime" width="120" sortable label="到货日期" ></el-table-column>
				<el-table-column prop="invoiceCode" width="120" sortable label="发票号" ></el-table-column>
				<el-table-column prop="invoiceTime" width="120" sortable label="发票日期" ></el-table-column>
				<el-table-column prop="validity" width="120" sortable label="有效期" ></el-table-column>
			</el-table>
			<el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage" :total="total"  @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>
		</div>
		<el-dialog :title="drugName" customClass="customWidth" :visible.sync="dialogFormVisible">
		  <el-form :model="form" label-width="120px">
			  <el-form-item label="品名：" prop="breedName">
			      <el-select v-model="breedName" @change="changeBreed" filterable placeholder="请选择" style="width:200px;">
			          <el-option
			              v-for="item in breedList"
						:key="item"
			              :label="item"
			              :value="item"
			          >
			          </el-option>
			      </el-select>
			  </el-form-item>
			  <el-form-item label="供应批次：" prop="breedName">
			      <el-select v-model="supplyBatch" @change="getbatch" value-key="batch"  filterable placeholder="请选择" style="width:200px;">
			          <el-option
			              v-for="item in batchList"
			  			  :key="item.batch"
			              :label="item.batch"
			              :value="item">
			          </el-option>
			      </el-select>	
			  </el-form-item>
			  <el-form-item label="有效期：" prop="breedName">
				  <!-- <el-input v-model="list.validity" 200pxcomplete="off"  style="width:300px;"></el-input> -->
			      {{list.validity}}
			  </el-form-item>
			  <el-form-item label="到货日期：" prop="time">
			      <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"  v-model="list.arrivalTime" style="width:200px;"></el-date-picker>
			  </el-form-item>
			  <el-form-item label="发票号">
			    <el-input v-model="list.invoiceCode" autocomplete="off"  style="width:200px;"></el-input>
			  </el-form-item>
			  <el-form-item label="发票日期：" prop="time">
			      <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"   v-model="list.invoiceTime" style="width:200px;"></el-date-picker>
			  </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="close">取 消</el-button>
		    <el-button type="primary" @click="save">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
import { supply_findByDetailedList,supply_findbreed,supply_findbatch,supply_update } from '@/request/api';
	export default{
		data(){
			return{
				supplyBatch:'',
				list:{},
				batchList:[],
				breedName:'',
				breedList:[],
				form:{},
				drugName:'',
				dialogFormVisible:false,
				total:0,
				currentPage:1,
				pagesize:10,
			    inputs:{},
				tableData:[],
				searchName:'',
				labelPosition:'right',
				ex:true
			}
		},
		created(){
		   var data = JSON.stringify(this.$store.state.supply)

			var c = "导出"
		
		   if(data.indexOf(c) != -1){
		       this.ex = true
		   }else{
		       this.ex = false
		   }
		},
		mounted() {
			this.inputs = this.$route.query
			this.init();
			this.getbreedName()
		},
		methods:{
			goback(){
				this.$router.go(-1)
			},
			getbatch(ele){
				this.list.supplyBatch = ele.batch
				this.list.validity = ele.deadLine
			},
			getbreedName(){
				supply_findbreed("").then((res)=>{
					this.breedList = res.data
				})
			},
			changeBreed(val){
				let data = {
					breedName:val
				}
				supply_findbatch(data).then((res)=>{
					this.batchList = res.data
				})
			},
			handleSelect(index,row){
				this.list = row
				this.dialogFormVisible = true
				this.drugName = row.drugName
			},
			handleCurrentChange(val){
			    this.currentPage = val
			    this.init()
			},
           init(){
			   let data = {
				   supplyId:this.inputs.id,
				   page:this.currentPage
			   }
			   supply_findByDetailedList(data).then((res)=>{
				   this.tableData = res.rows
				   this.total = res.total
			   })
		   },
		   save(){
			   console.log(this.list)
			   supply_update(this.list).then((res)=>{
				   this.$notify({
				       title: '提示',
				       message: '选择成功',
				       type: 'success'
				   });
				   this.dialogFormVisible = false
				   this.init()
			   })
		   },
		   close(){
			   // this.list = ""
			   this.breedName = ""
			   this.supplyBatch = ""
			   this.list.supplyBatch = ""
			   this.list.validity = ""
			   this.dialogFormVisible = false
		   },
		   handleExport(){
			   window.location.href = "http://" + window.location.host + "/supply/export/" + this.inputs.id;
		   }
		}
	}
</script>

<style>
	.el-pagination{
	    text-align: center;
	}
	/deep/.el-dialog{
	  display: flex;
	  flex-direction: column;
	  margin:0 !important;
	  position:absolute;
	  top:50%;
	  left:50%;
	  transform:translate(-50%,-50%);
	  max-height:calc(100% - 30px);
	  max-width:calc(100% - 30px);
	}
	.customWidth{
		width:30%;
	}

</style>